<template>
  <div class="box">
    <header>
    <span> <img @click="goBack" class="Back"  src="../assets/icon/hdpi/fh.png" alt=""></span>
     <span class="purse1">{{doctorPl.name  }}</span>
     
        </header>
    <main>
      <div class="chat_room">
          <div>
            <div v-for="(item,index) in doctorPl.consultation" :key="id">
                  <div style="margin-top: 30px;font-size: 14px;width: 200px;height: 60px;clear: both;">
                    <img src="../assets/images/x2.jpg"  alt="" style="width: 30px;height: 30px;border-radius: 50%;">
                    <p>{{ item.title }}</p>
                  </div>
                  <div style="margin-top: 30px;font-size: 14px;width: 200px;height: 60px;text-align: right;float: right;display: flex;">  
                    <p>{{ item.dtitle}}</p>
                    <img src="../assets/images/doctor_avatar.png" alt="" style="width: 30px;height: 30px;">
                  </div>
            </div>
          </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'; 
import {ContentDetail} from '../request/api'
import {useRoute,useRouter} from 'vue-router'
const router = useRouter();
const route=useRoute()

const goBack = () => {
  router.push('/hisconsultation');
};

const doctorPl = ref<Array<any>>([]);

  const id =route.params.id;  

watch(route,async()=>
        {
            doctorPl.value=(await ContentDetail(id)).data.data
        },
        {
            deep:true,
            immediate:true
        })


//  #d3f1ff


onMounted(() => {

});

</script>

<style>

.box
{
  width: 100vw;
  height: 100%;
}


.chat_room
{
    width: 100%;
    height: 100%;
    margin-left: 30px;
}

.Back
{
    margin-left: 10px;
}

</style>